<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Text Overflow</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script> -->
    <script src="http://localhost:8001/echarts/infra/test_local/dat.gui.js"></script>
    <script src="../dist/zrender.js"></script>
    <script src="lib/config.js"></script>
    <SCript src="data/text.js"></SCript>
</head>
<body>
    <style>
        html, body, #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #message {
            position: relative;
            padding: 20px 0;
        }
    </style>
    <div id="message"></div>
    <div id="main"></div>

    <script>
    var zr = zrender.init(document.getElementById('main'), {
        renderer: window.__ZRENDER__DEFAULT__RENDERER__
    });

    var POSITION_LIST = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    const config = {
        search: '',
        testElType: 'standalone_text',
        textWidth: 200,
        rectWidth: 100,
        rectX: 100,
        textHeight: 400,
        fontSize: 13,
        fixedLineHeight: false,
        lineHeight: 14,
        rich: true,
        overflow: 'break',
        lineOverflow: 'truncate',
        align: null,
        verticalAlign: null,
        position: POSITION_LIST[4],
        textStylePadding: 10
    }

    const gui = new dat.GUI();
    gui.add(config, 'search').onChange(update);
    gui.add(config, 'testElType', ['standalone_text', 'rect_text']).onChange(update);
    gui.add(config, 'textWidth', 0, 300).onChange(update);
    gui.add(config, 'textHeight', 10, 1600).onChange(update);
    gui.add(config, 'rectWidth', 0, 300).onChange(update);
    gui.add(config, 'rectX', 0, 400).onChange(update);
    gui.add(config, 'fontSize', 1, 30).onChange(update);
    gui.add(config, 'fixedLineHeight').onChange(update);
    gui.add(config, 'lineHeight', 12, 50).onChange(update);
    gui.add(config, 'rich').onChange(update);
    gui.add(config, 'overflow', ['break', 'breakAll', 'truncate', 'none']).onChange(update);
    gui.add(config, 'lineOverflow', ['truncate', null]).onChange(update);
    gui.add(config, 'align', [null, 'left', 'center', 'right']).onChange(update);
    gui.add(config, 'verticalAlign', [null, 'top', 'middle', 'bottom']).onChange(update);
    gui.add(config, 'position', POSITION_LIST).onChange(update);
    gui.add(config, 'textStylePadding', -10, 30).onChange(update);

    const texts = [
        LARGE_TEXT_EN,
        LARGE_TEXT_ZH,
        'abcde',
        '红黄蓝'
    ];
    const elementList = [];

    texts.forEach(text => {
        var standaloneTextEl = new zrender.Text({
            style: {
                text: text,
            }
        });
        zr.add(standaloneTextEl);

        var rectEl = new zrender.Rect({
            ignore: true,
            style: {
                fill: 'rgba(100,200,100,0.5)',
                lineWidth: 2,
            }
        });
        var rectTextEl = new zrender.Text({
            style: {
                text: text,
            }
        });
        rectEl.setTextContent(rectTextEl);
        // rectEl.setTextConfig({
        //     fill: '#333',
        // });
        zr.add(rectEl);

        elementList.push({standaloneTextEl, rectEl});
    });

    function update() {
        let lastX = null;

        elementList.forEach(({standaloneTextEl, rectEl}) => {
            const textWidth = config.textWidth;
            const textHeight = config.textHeight;
            const xx = lastX == null ? config.rectX : lastX + textWidth + 50;
            lastX = xx;

            if (config.testElType === 'standalone_text') {
                standaloneTextEl.ignore = false;
                rectEl.ignore = true;
            }
            else {
                standaloneTextEl.ignore = true;
                rectEl.ignore = false;
            }

            // Standalone text
            updateText(standaloneTextEl);
            standaloneTextEl.style.width = textWidth;
            standaloneTextEl.style.height = textHeight;
            standaloneTextEl.style.x = xx;

            // Rect text
            rectEl.setShape({
                x: xx,
                y: 300,
                width: config.rectWidth,
                height: 200,
            });
            const rectTextEl = rectEl.getTextContent();
            updateText(rectTextEl);
            rectTextEl.style.width = textWidth;
            rectTextEl.style.height = textHeight;
            rectEl.setTextConfig({
                distance: 10,
                position: config.position
            });
        });

        function updateText(text) {
            text.style.padding = config.textStylePadding;
            text.style.borderColor = '#000';
            text.style.borderWidth = 1;
            text.style.ellipsis = '…';

            text.style.fontSize = config.fontSize;
            text.style.overflow = config.overflow;
            text.style.lineOverflow = config.lineOverflow;
            text.style.align = config.align;
            text.style.verticalAlign = config.verticalAlign;

            text.style.rich = config.rich ? {
                highlight: {
                    // padding: 4,
                    backgroundColor: 'yellow',
                    fontSize: 20
                }
            } : null;

            if (text.style.__originalText == null) {
                text.style.__originalText = text.style.text;
            }

            if (config.search) {
                text.style.text = text.style.__originalText.replace(
                    new RegExp(config.search, 'g'), `{highlight|${config.search}}`
                );
            }
            else {
                text.style.text = text.style.__originalText;
            }

            if (!config.fixedLineHeight) {
                text.style.lineHeight = null;
            }
            else {
                text.style.lineHeight = config.lineHeight;
            }

            text.dirtyStyle();
        }

        console.time('render');
        zr.refreshImmediately();
        console.timeEnd('render');

        const msgHTML = [];
        elementList.forEach(({standaloneTextEl, rectEl}, idx) => {
            msgHTML.push(
                '[text block ' + idx + '] text.isTruncated: '
                + (config.testElType === 'standalone_text' ? standaloneTextEl : rectEl).isTruncated
            );
        });
        updateMessageDisplay(msgHTML.join('<br/>'));
    }

    function updateMessageDisplay(unescapedHTML) {
        const dom = document.getElementById('message');
        dom.innerHTML = unescapedHTML;
    }

    update();
    </script>
</body>
</html>